<template>
  <div class="outer">
    <div class="practiveWarp">
      <!-- 左侧导航 -->
      <div class="contentLeft">
        <!-- 左侧顶部 -->
        <div class="layoutTop">
          <div
            class="layoutTop_item activeMain"
            :class="$route.path.includes('/practice/room') || isActiveIndex == 5 ? 'active' : ''"
            @mouseenter="isActiveEnter(5)"
            @mouseleave="isActiveLeave"
            @click="expandStatus = !expandStatus"
          >
            练习室
            <el-icon :size="15" class="icon">
              <ArrowRightBold v-show="!expandStatus" />
              <ArrowDownBold v-show="expandStatus" />
            </el-icon>
          </div>
          <div
            class="layoutTop_sub"
            :style="{ height: expandStatus ? 'auto' : 0 }"
          >
            <router-link to="/practice/room" class="layoutTop_sub_my"
              >我的练习室</router-link
            >
          </div>
        </div>
        <!-- 左侧底部 -->
        <ul class="layoutBottom">
          <li
            class="layoutBottom_item"
            v-for="(item, index) in layoutBottomData"
            :key="item.title"
          >
            <router-link
              :to="(item.to as RouteLocationRaw)"
              class="layoutBottom_item_a activeMain"
              :class="
                ($route.path.includes(item.to as string) && item.to !== '') ||
                isActiveIndex == index+1
                  ? 'active'
                  : ''
              "
              @mouseenter="isActiveEnter(index + 1)"
              @mouseleave="isActiveLeave"
              @click="layoutBtn(index)"
              >{{ item.title }}</router-link
            >
          </li>
        </ul>

        <el-dialog
          v-model="dialogVisible"
          width="30%"
        >
          <span>请打开中舞网APP，点击"练习室"-"音频库"中查看。</span>
          <template #footer>
            <span class="dialog-footer">
              <el-button color="#F93684" @click="dialogVisible = false"
                >确定</el-button
              >
            </span>
          </template>
        </el-dialog>
      </div>

      <!-- 右侧练习室内容 -->
      <div class="contentRight">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "practice",
});
</script>

<script setup lang="ts">
import { ref, reactive, watch } from "vue";
import { RouteLocationRaw, useRoute } from "vue-router";
const route = useRoute();

const layoutBottomData = reactive([
  {
    title: "缓存",
    to: "/practice/mediaCache",
  },
  {
    title: "音频库",
    to: "",
  },
  {
    title: "收藏",
    to: "/practice/collections",
  },
  {
    title: "历史",
    to: "/practice/viewrecords",
  },
]);

const dialogVisible = ref(false)
//类名添加的状态
const isActiveIndex = ref(0);
const expandStatus = ref(false);

//移入事件
const isActiveEnter = (type: number) => {
  isActiveIndex.value = type;
};
//移出事件
const isActiveLeave = () => {
  isActiveIndex.value = 0;
};

//点击事件回调
const layoutBtn = (index: number) => {
  expandStatus.value = false;

  if (index == 1) {
    dialogVisible.value = true
  }
};

//监听路由的变化
watch(
  route,
  (newVal) => {
    if (newVal.path.includes("/practice/room")) {
      expandStatus.value = true;
    }
  },
  {
    immediate: true,
  }
);
</script>

<style lang="less" scoped>
.outer {
  background: #f5f7f9;
  .practiveWarp {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    padding: 25px 0;

    //左侧导航
    .contentLeft {
      font-size: 16px;
      box-sizing: border-box;
      //顶部
      .layoutTop {
        background-color: #ffffff;

        border-radius: 4px;
        padding: 5px 0;
        margin-bottom: 10px;

        .layoutTop_item {
          color: #111;
          padding: 17px 40px;
          cursor: pointer;
          position: relative;
          .icon {
            float: right;
            margin-top: 4px;
          }
        }

        .layoutTop_sub {
          cursor: pointer;
          height: 0;
          overflow: hidden;
          background-color: #ffffff;
          padding: 0 50px;
          line-height: 20px;
          .layoutTop_sub_my {
            color: #f93684;
            text-decoration: none;
          }
        }
      }
      //底部
      .layoutBottom {
        background: #fff;
        border-radius: 4px;
        padding: 5px 0;
        margin-bottom: 10px;
        .layoutBottom_item {
          list-style: none;
          .layoutBottom_item_a {
            display: block;
            padding: 17px 40px;
            position: relative;
            text-decoration: none;
            cursor: pointer;
            color: #111;
          }
        }
      }
    }

    //右侧导航
    .contentRight {
      width: 83%;
    }
  }
}

.active::before {
  content: "";
  background-color: #f93684;
}
.activeMain::before {
  content: "";
  position: absolute;
  width: 4px;
  height: 37px;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: all 0.3s linear;
}
</style>
>>>>>>> 6c00c36f63e5b06da5d8940e6650d72cee25302e
